<!-- 详情 -->
<template>
  <div class="drawer-layout">
    <el-drawer :title="title" :visible.sync="drawer" @closed="closeCurrentDrawer" size="85%" :wrapperClosable="false">
      <div class="layout" style="position: relative">
        <div>
          <el-form class="searchForm" :class="ifShowSearch ? '' : 'overoverflow-hidden'" :inline="true" ref="searchForm"
            :model="searchForm" label-width="85px" size="small">
            <div ref="formitem">
              <el-form-item label="供货商">
                <el-select v-model="searchForm.supplier_id" placeholder="请选择供应商" clearable>
                  <el-option v-for="item in supplierList" :key="item.id" :label="item.supplier_name" :value="item.id" />
                </el-select>
              </el-form-item>
              <el-form-item label="供货商名称">
                <el-input v-model="searchForm.ghs_name" placeholder="请输入供货商名称" clearable />
              </el-form-item>
              <el-form-item label="商品名称">
                <el-input v-model="searchForm.goods_name" placeholder="请输入商品名称" clearable />
              </el-form-item>
              <el-form-item label="商品分类">
                <el-select v-model="searchForm.type" placeholder="请选择商品分类" clearable>
                  <el-option v-for="item in typeList" :key="item.value" :label="item.label" :value="item.value" />
                </el-select>
              </el-form-item>
              <el-form-item label="商品类目">
                <el-cascader v-model="searchForm.category_id" :options="tableData" :props="{
                  checkStrictly: true,
                  value: 'id',
                  label: 'category_name',
                  children: 'children',
                }" collapse-tags clearable />
              </el-form-item>
              <el-form-item label="创建时间">
                <el-date-picker v-model="couponTime" type="daterange" range-separator="至" start-placeholder="开始日期"
                  end-placeholder="结束日期" clearable>
                </el-date-picker>
              </el-form-item>
            </div>
            <div class="SearchBtn">
              <el-button type="primary" size="small" icon="el-icon-search" @click="querysearch">查询</el-button>
              <el-button size="small" icon="el-icon-refresh" @click="resetSearch">重置</el-button>
              <el-button size="small" :icon="ifShowSearch ? 'el-icon-arrow-up' : 'el-icon-arrow-down'"
                @click="ifShowSearch = !ifShowSearch">{{ ifShowSearch ? '收起' : '展开' }}</el-button>
            </div>
          </el-form>
        </div>
        <el-divider></el-divider>
        <!-- 列表 -->
        <div style="margin-top: 20px">
          <el-table v-loading="loading"
            :header-cell-style="{ 'background-color': '#e5eeff', color: '#5f687c', height: '47px', fontWeight: 'normal' }"
            highlight-current-row :max-height="tableHeight" :data="tableList" style="width: 100%">
            <el-table-column v-for="fruit in tableThead" :key="fruit" :label="tableTheadOptions[fruit].label"
              :min-width="tableTheadOptions[fruit].minwidth" align="center">
              <template slot-scope="scope">
                <div v-if="fruit == 'supplier_name'">
                  <!-- 供货商 -->
                  <el-tooltip :content="scope.row.supplier_name" :disabled="isShowTooltip" effect="dark"
                    placement="top">
                    <div @mouseover="onMouseOver(scope.row.supplier_name)"
                      style="overflow: hidden;  text-overflow: ellipsis; white-space: nowrap;">
                      <span :ref="scope.row.supplier_name">{{ scope.row.supplier_name }}</span>
                    </div>
                  </el-tooltip>
                </div>
                <div v-else-if="fruit == 'goods_name'">
                  <!-- 商品名称 -->
                  <el-tooltip :content="scope.row.goods_name" :disabled="isShowTooltip" effect="dark" placement="top">
                    <div @mouseover="onMouseOver(scope.row.goods_name)"
                      style="overflow: hidden;  text-overflow: ellipsis; white-space: nowrap;">
                      <span :ref="scope.row.goods_name">{{ scope.row.goods_name }}</span>
                    </div>
                  </el-tooltip>
                </div>
                <div v-else-if="fruit == 'inventory'">
                  <!-- 产品类型 -->
                  <span v-if="scope.row.category1_name">{{ scope.row.category1_name }}</span>
                  <el-divider v-if="scope.row.category2_name" direction="vertical"></el-divider>
                  <span v-if="scope.row.category2_name">{{ scope.row.category2_name }}</span>
                  <el-divider v-if="scope.row.category3_name" direction="vertical"></el-divider>
                  <span v-if="scope.row.category3_name">{{ scope.row.category3_name }}</span>
                  <el-divider v-if="scope.row.category4_name" direction="vertical"></el-divider>
                  <span v-if="scope.row.category4_name">{{ scope.row.category4_name }}</span>
                </div>
                <div v-else-if="fruit == 'product_code'">
                  <!-- 商品编号 -->
                  <el-tooltip :content="scope.row.product_code" :disabled="isShowTooltip" effect="dark" placement="top">
                    <div @mouseover="onMouseOver(scope.row.product_code)"
                      style="overflow: hidden;  text-overflow: ellipsis; white-space: nowrap;">
                      <span :ref="scope.row.product_code">{{ scope.row.product_code }}</span>
                    </div>
                  </el-tooltip>
                </div>

                <div v-else-if="fruit == 'main_image'">
                  <!-- 商品缩略图 -->
                  <div style="height:30px;">
                    <el-image v-if="scope.row.main_image" style="width: 30px; height: 30px;border-radius: 5px;"
                      :src="scope.row.main_image" />
                    <div v-else>-</div>
                  </div>
                </div>
                <div v-else-if="fruit == 'status'">
                  <span :style="{ 'color': scope.row.status == 1 ? '#67C23A' : '#F56C6C' }">{{
                                        scope.row.status == 1
                                        ? '启用' : '禁用' }}</span>
                </div>
                <div v-else-if="fruit == 'product_list'">
                  <!-- 商品缩略图 -->
                  <span v-if="scope.row.product_list">
                    {{scope.row.product_list[0].cost_price}}
                  </span>
                </div>
                <div v-else>
                  <el-tooltip
                    placement="top-start"
                    :content="scope.row[fruit] + ''"
                  >
                    <div class="one_line_hidden">
                      {{ scope.row[fruit] ? scope.row[fruit] : "-" }}
                    </div>
                  </el-tooltip>
                </div>
              </template>
            </el-table-column>
            <el-table-column fixed="right" align="center" width="100" prop="address" label="操作">
              <template slot-scope="scope">
                <el-button type="text" size="mini" @click="addSelectedGoodsWay(scope.row)">加入选品库</el-button>
              </template>
            </el-table-column>
          </el-table>
          <div style="text-align: right;margin-top: 10px;">
            <el-pagination :current-page="searchForm.page" :page-sizes="[10, 20, 30, 40]" :page-size="searchForm.count"
              layout="total, sizes, prev, pager, next, jumper" :total="total" @size-change="handleSizeChange"
              @current-change="handleCurrentChange" />
          </div>
        </div>
      </div>
    </el-drawer>
    <rule v-if="ifshowrule" :title="ruletitle" :goodsdetail="goodsdetail"></rule>
  </div>
</template>
<script>
  import rule from './rule.vue'
  import {
    goodslist,
    supplierLists,
    getGoodsProductList,
    GoodsCateList,
    getCateLis,
    getSupplierGoodsInfo,
  } from "@/api/supplier/index";
  // 全部表头选项
  const tableTheadOption = {
    id: {
      label: "ID",
      field: "id",
      minwidth: '80px'
    },
    supplier_name: {
      label: "供货商",
      field: "supplier_name",
      minwidth: '150px'
    },
    goods_name: {
      label: "商品名称",
      field: "goods_name",
      minwidth: '200px'
    },
    inventory: {
      label: "产品类型",
      field: "inventory",
      minwidth: '200px'
    },
    product_code: {
      label: "商品编号",
      field: "product_code",
      minwidth: '150px'
    },
    main_image: {
      label: "商品缩略图",
      field: "main_image",
      minwidth: '100px'
    },
    product_list: {
      label: "成本价",
      field: "product_list",
      minwidth: '150px'
    },
    CountRepertory: {
      label: "库存",
      field: "CountRepertory",
      minwidth: '100px'
    },
  }
  //全部表头
  const allTableThead = ['id', 'supplier_name', 'goods_name', 'inventory', 'product_code', 'main_image', 'product_list',
    'CountRepertory'
  ]
  //默认表头
  const defaultTableThead = ['id', 'supplier_name', 'goods_name', 'inventory', 'product_code', 'main_image',
    'product_list', 'CountRepertory'
  ]
  export default {
    name: "detail",
    props: [
      "title",
    ],
    components: {
      rule,
    },
    data() {
      return {
        tableData:[],//分类
        //drawer默认打开
        drawer: true,
        //查询
        couponTime: [], //时间数组
        searchForm: {
          page: 1,
          count: 10,
          category_id:'',
          status: 1,
          supplier_id: '', //供应商ID
          ghs_name: '', //供应商名字
          goods_name: '', //商品名字
          type: '',
          start_time: '',
          end_time: ''
        },
        // 供货商列表
        supplierList: [],
        //商品类目列表
        typeList: [{
            value: 1,
            label: "普通商品",
          },
          {
            value: 2,
            label: "卡密商品",
          },
          {
            value: 3,
            label: "虚拟商品",
          },
        ],
        //是否展开余下查询
        ifShowSearch: false,
        // 动态显示表头默认表头
        tableTheadOptions: tableTheadOption, //表头选项
        allTableThead: allTableThead, //全部表头
        tableThead: defaultTableThead, // 默认表头
        checkboxTableThead: defaultTableThead, // 默认表头值
        tableKey: 1, // 为了保证table 每次都会重渲
        tableHeight: this.calculateTableHeight(), // 初始化表格高度
        //表格加载
        loading: false,
        //列表
        tableList: [],
        //总条数
        total: 0,
        //是否显示文字提示内容
        isShowTooltip: false,
        ifshowrule: false,
        ruletitle: '',
        goodsdetail: ''
      };
    },
    mounted() {
      // 监听窗口大小变化，实时更新表格高度
      window.addEventListener('resize', this.handleResize);
      //获取供货商列表
      this.getSupplierLists();
      //获取商品列表
      this.getSupplierListWay();
      //获取商品类目
      this.getcatelist();

    },
    watch: {
      //监听表头变化
      checkboxTableThead(valArr) {
        this.tableThead = this.allTableThead.filter(
          (i) => valArr.indexOf(i) >= 0
        );
        this.tableKey = this.tableKey + 1;
      },
    },
    methods: {
      getcatelist() {
        getCateLis().then((res) => {
          if (res.code !== 200 || res.status !== 1) {
            return this.$messages.error(res.msg);
          }
          this.tableData = res.data;
        });
      },
      // 关闭当前抽屉
      closeCurrentDrawer() {
        this.$parent.closeDrawer();
      },
      // 窗口大小变化时重新计算表格高度
      handleResize() {
        this.tableHeight = this.calculateTableHeight();
      },
      // 根据实际需求计算表格高度
      calculateTableHeight() {
        return window.innerHeight - 136;
      },
      //单元格内容超出，显示文字提示内容
      onMouseOver(str) {
        const tag = this.$refs[str][0]
        const parentWidth = tag.parentNode.offsetWidth // 获取元素父级可视宽度
        const contentWidth = tag.offsetWidth // 获取元素可视宽度
        this.isShowTooltip = contentWidth <= parentWidth
      },
      // 获取供货商列表
      async getSupplierLists() {
        const res = await supplierLists();
        const {
          code,
          data,
          message
        } = res;
        if (code === 200) {
          this.supplierList = data;
        } else {
          this.$message.error(message);
        }
      },
      //查询
      querysearch() {
        this.getSupplierListWay()
      },
      // 重置选品列表搜索
      resetSearch() {
        this.searchForm.page = 1
        this.searchForm.count = 10
        this.searchForm.status = 1
        this.searchForm.supplier_id = ''
        this.searchForm.goods_name = ''
        this.searchForm.type = ''
        this.searchForm.start_time = ''
        this.searchForm.end_time = ''
        this.searchForm.category_id = ''
        this.couponTime = [];
        this.getSupplierListWay();
      },
      // 获取选品列表
      async getSupplierListWay() {
        this.loading = true;
        if(this.couponTime.length !== 0) {
          this.searchForm.start_time = this.couponTime[0];
          this.searchForm.end_time = this.couponTime[1];
        }
        if (this.searchForm.category_id) {
          let arrayTests = this.searchForm.category_id

          let [lastValue] = arrayTests.slice(-1);
          this.searchForm.category_id = arrayTests.length + ':' +lastValue
        }
        const res = await goodslist(this.searchForm);
        const {
          code,
          data,
          message
        } = res;
        if (code === 200) {
          data.list.forEach((item) => {
            item.gc_id = "";
          });
          this.tableList = data.list;
          this.total = res.data.total;
          this.searchForm.category_id = ''
        } else {
          this.$message.error(res.msg);
        }
        this.loading = false;
      },
      // 商户分类切换分页
      handleCurrentChange(val) {
        this.searchForm.page = val;
        this.getSupplierListWay();
      },
      // 商户分类切换每页数量
      handleSizeChange(val) {
        this.searchForm.count = val;
        this.getSupplierListWay();
      },
      //加入选品库
      addSelectedGoodsWay(row) {
        this.ruletitle = '配置选品规则';
        this.ifshowrule = true;
        getSupplierGoodsInfo({
          id: row.id
        }).then((res) => {
          this.goodsdetail = res.data
        });
      },
      //关闭配置选聘规则抽屉
      closeDrawer() {
        this.ifshowrule = false;
        this.goodsdetail = {}
        // this.doSearchGoods();
      },
      closeDrawers(){

      },
    },
  };
</script>
<style lang="scss">
  .drawer-layout {

    /*1.显示滚动条：当内容超出容器的时候，可以拖动：*/
    // .el-drawer__body {
    //     overflow: auto;
    // }

    /*2.隐藏滚动条，太丑了*/
    .el-drawer__container ::-webkit-scrollbar {
      display: none;
    }

    .el-drawer__header {
      background-color: #409eff;
      color: #ffffff;
      padding: 10px 20px;
      margin-bottom: 10px;
    }

    // .el-alert--warning.is-light .el-alert__description {
    //     color: #c77b04;
    //     font-size: 14px;
    // }

    // .form-box-item {
    //     .el-form-item__label {
    //         font-size: 14px;
    //         font-weight: 500;
    //         // width: 96px;
    //     }

    //     .el-input {
    //         width: 250px;
    //     }
    // }
  }
</style>
<style lang="scss" scoped>
  .layout {
    padding: 10px 20px;

    // 筛选样式
    .searchForm {
      display: flex;

      .SearchBtn {
        display: flex;
        justify-content: flex-end;
      }
    }

    // 筛选超出隐藏
    .overoverflow-hidden {
      height: 50px;
      overflow: hidden;

    }
  }



  .blockquote-box {
    border-left: 4px solid #409eff;
    padding-left: 16px;
    margin: 16px 0;
    height: 40px;
    line-height: 40px;
    background: #fafafa;
    font-size: 16px;
  }

  .form-box {
    margin: 0 20px;

    .form-box-item {
      padding-bottom: 10px;
      padding-right: 20px;
      font-size: 12px;
      color: #4c4c4c;

      .form-tip {
        font-size: 12px;
        color: #4c4c4c;

        .tip-key {
          font-weight: bold;
          text-decoration: underline;
        }
      }

      .form-product {
        display: flex;
        font-size: 12px;
        color: #ee3737;
      }

      .Instructions {
        background: #f6f6f6;
        border-radius: 4px;
        padding: 10px;
      }
    }

    .table-top {
      display: flex;
      justify-content: space-between;
      margin-bottom: 20px;

      .table-top-left {
        display: flex;

        div {
          margin-right: 20px;
        }
      }

      .table-top-right {
        display: flex;

        div {
          margin-left: 20px;
        }
      }
    }

    .table-num {
      margin-left: 5px;
      background: #f0f0f0;
      width: 35px;
      border-radius: 5px;
    }
  }

  .button-box {
    margin-left: 30px;
    margin-bottom: 20px;

    .next-button {
      background-color: #eeeeee;
      color: #4c4c4c;
      height: 30px;
    }
  }
</style>
